<template>
  <div class="page_content daraBoardStreetAnalysis_content">
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title">测评情况</div>
    </div>
    <div class="main_box m-10 grid">
      <div ref="mainEchart" class="main_echart"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
  onUnmounted,
} from "vue";
// import { useStore } from "vuex";
import * as echarts from "echarts";

// const store = useStore();
const iconPng = new URL("@/assets/img/index/pf.png", import.meta.url).href;
const props: any = defineProps({});
const mainEchart = ref<any>(null);
const myChart = shallowRef();
onMounted(() => {
  myChart.value = echarts.init(mainEchart.value);
  chartInit();
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => { });
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
const chartInit = () => {
  let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF"];
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      trigger: "item",
      //   formatter: "{b}<br/> {c}  ({d}%)",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    // title: {
    //   text: "苹果", //标题文本
    //   left: "center",
    //   top: "55%",
    //   textStyle: {
    //     //文本样式
    //     fontSize: 15,
    //     color: "rgba(255, 255, 255, 0.8)",
    //     align: "center",
    //   },
    // },
    legend: {
      top: "1%",
      left: "center",
    },

    grid: {
      left: "10%",
      right: "10%",
      bottom: "10%",
      top: "1%",
      containLabel: true,
    },
    series: [
      {
        name: "测评情况",
        type: 'pie',
        radius: ['1%', "84%"],
        center: ["50%", "56%"], //圆的位置
        roseType: 'area',
        itemStyle: {
          borderRadius: 2
        },
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
          formatter: "{d}" + "%",
          color: "#1d60ad", //文字的颜色
        },

        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 16,
        //     fontWeight: "bold",
        //   },
        // },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 1048,
            name: "优秀",
          },
          {
            value: 1735,
            name: "良好",
          },
          {
            value: 1580,
            name: "合格",
          },
          {
            value: 1484,
            name: "较差",
          },
        ],
      },
    ],
  });
};
const handleResize = () => {
  if (myChart.value) {
    // 调用Echarts实例的resize方法，重新绘制图表
    myChart.value.resize();
  }
};
</script>

<style lang="scss" scoped>
.daraBoardStreetAnalysis_content {
  height: 250px;

  .header_box {}

  .main_box {
    .main_echart {
      width: 100%;
      height: calc(250px - 40px  );
    }
  }
}
</style>